<template>
  <div>
    <button @click="getTalk">获取土味情话</button>
    <ul>
      <li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.title }}</li>
    </ul>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import { useTalkStore } from '../store/loveTalk.ts'
interface TalkObj {
  id: string,
  title: string
}

// let talkList = reactive<TalkObj[]>([])
// console.log(talkList);
const talkStore = useTalkStore()
console.log(talkStore.talkList, 'talkStore');
function getTalk(): void {
  // let newList = reactive([{ id: '00001', title: '吃饭了吗' },
  // { id: '00002', title: '睡觉了吗' },])
  // talkList.push(...newList) 
  talkStore.getTalk()
}

talkStore.$subscribe((mutate, state) => {
  localStorage.setItem('list', JSON.stringify(state.talkList))
})
</script>

<style scoped lang='scss'></style>